<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片展示区域 -->
    <el-card>
      <el-row class="levbut">
        <el-col>
          <el-button type="primary" @click="showAddParentCateDialog"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格展示区域 -->
      <el-table
        :data="categLest"
        row-key="cat_id"
        border
        lazy
        show-header
        :highlight-current-row="false"
      >
        <!-- 序号 -->
        <el-table-column width="50px" type="index" label="#"></el-table-column>
        <!-- 分类名称 -->
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <!-- 是否有效 -->
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="!scope.row.cat_deleted"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
        </el-table-column>
        <!-- 排序 -->
        <el-table-column label="排序">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              type="success"
              size="mini"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag type="warning" size="mini" v-else>三级</el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showDeitCateDialog(scope.row.cat_id)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="mini"
              autofocus
              @click="showDelCatDiglog(scope.row.cat_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="qureyInfo.pagesize"
        :current-page="qureyInfo.pagenum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px"
      ></el-pagination>
    </el-card>

    <!-- 添加父级分类展示对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="AddParentCateDialog"
      width="50%"
      @close="addCateDialogVisibleUp"
    >
      <!-- 主体展示区域 -->
      <el-form
        label-width="100px"
        :model="addCateForm"
        :rules="adddRules"
        ref="addCateFormRef"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <!-- options展示的数据源 -->
          <!-- props 指定配置属性 -->
          <el-cascader
            expand-trigger="hover"
            clearable
            checkStrictly="true"
            v-model="selectedKeys"
            :options="ParentCateList"
            :props="cascaderProps"
            @change="parentCateChange"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <!-- 按钮操作区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddParentCateDialog = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑修改分类对话框 -->
    <el-dialog
      title="修改分类"
      :visible.sync="deitCateDialogVisible"
      width="50%"
    >
      <!-- 主体展示区域 -->

      <el-form
        :model="deitCateForm"
        :rules="deitRules"
        ref="deitCateFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="deitCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>

      <!-- 按钮操作区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="deitCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deitCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  components: {},
  // 定义属性
  data() {
    return {
      //商品信息查询参数
      qureyInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      // 商品信息列表
      categLest: [],
      //总条数
      total: 0,
      // 编辑分了对话框控制
      deitCateDialogVisible: false,
      //  添加分类对话框控制
      addCateDialogVisible: false,
      // 删除控制
      delCateDialogVisible: false,
      // 展示父级添加分类
      AddParentCateDialog: false,
      //添加分类表单
      addCateForm: {
        cat_name: '', //分类名称
        cat_pid: 0, //分类父 ID
        cat_level: 0, //分类层级,默认一级分类
      },
      // 添加分类表单验证规则
      adddRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' },
        ],
      },
      // 父级商品分类列表
      ParentCateList: [],
      //指定级联选择器配置对象
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children', //子选项
        expandTrigger: 'hover',
        checkStrictly: true,
      },
      //选中的父级分类的ID数组
      selectedKeys: [],
      // 编辑分类表单
      deitCateForm: {
        cat_name: '', //分类名称
      },
      // 编辑分类表单验证规则
      deitRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' },
        ],
      },
      // 依据ID查询到的商品分类
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取商品分类数据列表
    async getcatgList() {
      let { data: res } = await this.$http.get('categories', {
        params: this.qureyInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品分类列表失败 ！');
      }
      // 获取的数据列表绑定
      this.categLest = res.data.result;
      // 总数据条数
      this.total = res.data.total;
      // console.log(res.data);
    },
    // 监听pagesize改变
    handleSizeChange(newSize) {
      this.qureyInfo.pagesize = newSize;
      this.getcatgList();
    },
    // 监听 pagenum的改变
    handleCurrentChange(newPagenum) {
      this.qureyInfo.pagenum = newPagenum;
      this.getcatgList();
    },
    // 显示根据ID查询添加分类对话框控制按钮
    async showDeitCateDialog(dietId) {
      if (dietId) {
        let { data: res } = await this.$http.get(`categories/${dietId}`);
        if (res.meta.status !== 200)
          return this.$message.error('查询分类名称失败');
        this.deitCateForm = res.data;
      }
      // 点击前时获取数据然后打开对话框展示
      this.deitCateDialogVisible = true;
    },

    // 展示添加父级列表对话框
    showAddParentCateDialog() {
      this.AddParentCateDialog = true;
      //展示父级分了列表
      this.getParentCateList();
    },
    //请求父级的商品分类
    async getParentCateList() {
      let { data: res } = await this.$http.get('categories', {
        params: {
          type: 2,
        },
      });
      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类失败 !');
      }
      this.ParentCateList = res.data;
      console.log(res.data);
    },
    // 级联选择器触发的内容
    parentCateChange() {
      console.log(this.selectedKeys);
      // 如果this.selectedKeys长度>0 ,表示选择了父级分类

      if (this.selectedKeys.length > 0) {
        // 父级分类的ID
        this.addCateForm.cat_pid =
          this.selectedKeys[this.selectedKeys.length - 1];
        this.addCateForm.cat_level = this.selectedKeys.length;

        return;
      } else {
        // 没选择父级分类，那么id和分类层级都为0
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
    },
    // 确定提交添加分类
    addCate() {
      //预验证数据通过则发送请求
      this.$refs.addCateFormRef.validate(async (valid) => {
        if (!valid) return;
        let { data: res } = await this.$http.post(
          'categories',
          this.addCateForm
        );
        console.log(res);
        if (res.meta.status !== 201)
          return this.$message.error('添加分类失败 ！');
        this.$message.success(res.meta.msg);
        this.getcatgList();
        this.AddParentCateDialog = false;
      });
    },
    // 监听父级添加分类对话框关闭
    addCateDialogVisibleUp() {
      // 关闭就重置表单数据
      this.$refs.addCateFormRef.resetFields();
      this.selectedKeys = [];
      this.addCateForm.cat_pid = 0;
      this.addCateForm.cat_level = 0;
    },
    // 确定提交编辑修改
    deitCate() {
      this.$refs.deitCateFormRef.validate(async (valid) => {
        let id = this.deitCateForm.cat_id,
          cat_name = this.deitCateForm.cat_name;
        if (!valid) return;
        let { data: res } = await this.$http.put(`categories/${id}`, {
          cat_name: cat_name,
        });
        if (res.meta.status !== 200)
          return this.$message.error('修改分类失败 ！');
        // 提示成功
        console.log(res);
        this.$message.success(res.meta.msg);
        // 刷新列表
        this.getcatgList();
        // 关闭对话框
        this.deitCateDialogVisible = false;
      });
    },
    // 删除对话框控制
    async showDelCatDiglog(deitId) {
      let confirmDeitResult = await this.$confirm(
        '此操作将永久删除该分类, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err);
      if (confirmDeitResult !== 'confirm') {
        return this.$message.info('已取消删除删除分类的操作!');
      }

      let { data: res } = await this.$http.delete(`categories/${deitId}`);
      if(res.meta.status !==200) return this.$message.info('删除分类失败 ！')
      this.$message.success(res.meta.msg)
      this.getcatgList()
    },
    //分类的展示序号
   
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getcatgList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='less' scoped>
.el-cascader {
  width: 100%;
}
</style>